<template>
  <div class="datav-screen" :class="{ 'fullscreen-mode': isFullscreen }">
    <!-- 大屏标题 -->
    <div class="screen-header">
      <div class="header-decoration"></div>
      <h1 class="screen-title">电商用户行为实时监控大屏</h1>
      <div class="header-decoration"></div>
      <div class="header-controls">
        <FullscreenButton />
        <div class="current-time">{{ currentTime }}</div>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="screen-content">
      <!-- 左侧区域 -->
      <div class="left-panel">
        <!-- 左上：实时数据概览 -->
        <div class="panel-section">
          <BorderBox type="1" class="section-border">
            <div class="section-header">
              <h3 class="section-title">实时数据概览</h3>
            </div>
            <div class="metrics-grid">
              <div class="metric-item" v-for="(metric, index) in leftMetrics" :key="index">
                <div class="metric-value" :style="{ color: metric.color }">{{ metric.value }}</div>
                <div class="metric-label">{{ metric.label }}</div>
                <div class="metric-unit">{{ metric.unit }}</div>
              </div>
            </div>
          </BorderBox>
        </div>

        <!-- 左中：用户访问趋势 -->
        <div class="panel-section">
          <BorderBox type="2" class="section-border">
            <div class="section-header">
              <h3 class="section-title">用户访问趋势</h3>
            </div>
            <div ref="leftChart1" class="chart-container"></div>
          </BorderBox>
        </div>

        <!-- 左下：热门商品排行 -->
        <div class="panel-section">
          <BorderBox type="3" class="section-border">
            <div class="section-header">
              <h3 class="section-title">热门商品排行</h3>
            </div>
            <div class="ranking-list">
              <div class="ranking-item" v-for="(item, index) in hotProducts" :key="index">
                <div class="rank-number">{{ index + 1 }}</div>
                <div class="product-info">
                  <div class="product-name">{{ item.name }}</div>
                  <div class="product-sales">销量: {{ item.sales }}</div>
                </div>
                <div class="sales-bar">
                  <div class="bar-fill" :style="{ width: item.percentage + '%' }"></div>
                </div>
              </div>
            </div>
          </BorderBox>
        </div>
      </div>

      <!-- 中间区域 -->
      <div class="center-panel">
        <!-- 中上：核心业务指标 -->
        <div class="panel-section">
          <BorderBox type="1" class="section-border">
            <div class="section-header">
              <h3 class="section-title">核心业务指标</h3>
            </div>
            <div class="center-metrics">
              <div class="big-metric" v-for="(metric, index) in centerMetrics" :key="index">
                <div class="big-value" :style="{ color: metric.color }">{{ metric.value }}</div>
                <div class="big-label">{{ metric.label }}</div>
                <div class="metric-trend" :class="metric.trend">
                  <span class="trend-icon">{{ metric.trendIcon }}</span>
                  <span class="trend-value">{{ metric.trendValue }}</span>
                </div>
              </div>
            </div>
          </BorderBox>
        </div>

        <!-- 中中：主要图表 -->
        <div class="panel-section main-chart-section">
          <BorderBox type="2" class="section-border">
            <div class="section-header">
              <h3 class="section-title">销售数据分析</h3>
              <div class="chart-tabs">
                <button
                  class="tab-item"
                  :class="{ active: currentSalesTab === 'trend' }"
                  @click="switchSalesTab('trend')"
                >
                  销售趋势
                </button>
                <button
                  class="tab-item"
                  :class="{ active: currentSalesTab === 'category' }"
                  @click="switchSalesTab('category')"
                >
                  商品分类
                </button>
                <button
                  class="tab-item"
                  :class="{ active: currentSalesTab === 'region' }"
                  @click="switchSalesTab('region')"
                >
                  地域分布
                </button>
              </div>
            </div>
            <div ref="centerMainChart" class="chart-container main-chart"></div>
          </BorderBox>
        </div>

        <!-- 中下：实时订单 -->
        <div class="panel-section data-flow-section">
          <BorderBox type="3" class="section-border">
            <div class="section-header">
              <h3 class="section-title">📦 实时订单</h3>
            </div>
            <!-- 实时订单信息滚动 -->
            <div class="order-stream">
              <div class="order-list" ref="orderListRef">
                <div
                  class="order-item"
                  v-for="(order, index) in displayOrders"
                  :key="order.id"
                  :class="{ 'order-highlight': index === 0 }"
                >
                  <div class="order-time">{{ order.time }}</div>
                  <div class="order-info">
                    <span class="order-id">#{{ order.id.slice(-4) }}</span>
                    <span class="order-product">{{ order.product }}</span>
                    <span class="order-amount">¥{{ order.amount }}</span>
                    <span class="order-location">{{ order.location }}</span>
                  </div>
                </div>
              </div>
            </div>
          </BorderBox>
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-panel">
        <!-- 右上：地域分布 -->
        <div class="panel-section">
          <BorderBox type="1" class="section-border">
            <div class="section-header">
              <h3 class="section-title">用户地域分布</h3>
            </div>
            <div ref="rightChart1" class="chart-container"></div>
          </BorderBox>
        </div>

        <!-- 右中：设备统计 -->
        <div class="panel-section">
          <BorderBox type="2" class="section-border">
            <div class="section-header">
              <h3 class="section-title">设备访问统计</h3>
            </div>
            <div ref="rightChart2" class="chart-container"></div>
          </BorderBox>
        </div>

        <!-- 右下：系统监控 -->
        <div class="panel-section">
          <BorderBox type="3" class="section-border">
            <div class="section-header">
              <h3 class="section-title">系统监控</h3>
            </div>
            <div class="system-monitor">
              <div class="monitor-item" v-for="(item, index) in systemStatus" :key="index">
                <div class="monitor-label">{{ item.label }}</div>
                <div class="monitor-progress">
                  <div class="progress-bar">
                    <div class="progress-fill"
                         :style="{ width: item.value + '%', backgroundColor: item.color }">
                    </div>
                  </div>
                  <span class="progress-text">{{ item.value }}%</span>
                </div>
              </div>
            </div>
          </BorderBox>
        </div>

        <!-- 右下2：设备状态图表 -->
        <div class="panel-section">
          <BorderBox type="4" class="section-border">
            <div class="section-header">
              <h3 class="section-title">设备状态</h3>
            </div>
            <div ref="rightChart3" class="chart-container"></div>
          </BorderBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import BorderBox from './components/BorderBox.vue'
import FullscreenButton from './components/FullscreenButton.vue'
import { useFullscreen } from './composables/useFullscreen'

// 使用在线地图数据或者改为散点图
const loadChinaMap = async () => {
  try {
    // 尝试从CDN加载中国地图数据
    const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
    const geoJson = await response.json()
    echarts.registerMap('china', geoJson)
  } catch (error) {
    console.warn('无法加载地图数据，使用散点图替代')
    // 如果无法加载地图，我们将在initMainChart中使用散点图
  }
}

// 全屏控制
const { isFullscreen } = useFullscreen()

// 图表引用
const leftChart1 = ref(null)
const centerMainChart = ref(null)
const rightChart1 = ref(null)
const rightChart2 = ref(null)
const rightChart3 = ref(null)

// 图表实例
let leftChart1Instance = null
let centerMainChartInstance = null
let rightChart1Instance = null
let rightChart2Instance = null
let rightChart3Instance = null

// 当前时间
const currentTime = ref('')

// 销售分析标签状态
const currentSalesTab = ref('region')

// 左侧指标数据
const leftMetrics = ref([
  { label: '在线用户', value: '12,608', unit: '人', color: '#00d4ff' },
  { label: '今日订单', value: '3,260', unit: '单', color: '#00ff88' },
  { label: '今日销售额', value: '1,263', unit: '万元', color: '#ff6b6b' },
  { label: '转化率', value: '12.5', unit: '%', color: '#ffd93d' }
])

// 中间核心指标
const centerMetrics = ref([
  {
    label: '总销售额',
    value: '2,580,000',
    color: '#00d4ff',
    trend: 'up',
    trendIcon: '↗',
    trendValue: '+12.5%'
  },
  {
    label: '订单总数',
    value: '15,680',
    color: '#00ff88',
    trend: 'up',
    trendIcon: '↗',
    trendValue: '+8.3%'
  },
  {
    label: '用户总数',
    value: '89,520',
    color: '#ff6b6b',
    trend: 'down',
    trendIcon: '↘',
    trendValue: '-2.1%'
  }
])

// 热门商品数据
const hotProducts = ref([
  { name: 'iPhone 15 Pro', sales: 1580, percentage: 100 },
  { name: 'MacBook Air M2', sales: 1240, percentage: 78 },
  { name: 'iPad Pro', sales: 980, percentage: 62 },
  { name: 'AirPods Pro', sales: 850, percentage: 54 },
  { name: 'Apple Watch', sales: 720, percentage: 46 },
  { name: 'Magic Keyboard', sales: 650, percentage: 41 },
  { name: 'Studio Display', sales: 580, percentage: 37 },
  { name: 'Mac Mini', sales: 520, percentage: 33 }
])



// 系统状态
const systemStatus = ref([
  { label: 'CPU使用率', value: 65, color: '#00d4ff' },
  { label: '内存使用率', value: 78, color: '#00ff88' },
  { label: '网络带宽', value: 45, color: '#ffd93d' },
  { label: '磁盘使用率', value: 32, color: '#ff6b6b' }
])

// 实时订单数据
const orderListRef = ref(null)
const allOrders = ref([
  { id: '202412040001', time: '14:32:15', product: 'iPhone15', amount: '8999', location: '北京' },
  { id: '202412040002', time: '14:32:28', product: 'MacBook', amount: '9999', location: '上海' },
  { id: '202412040003', time: '14:32:45', product: 'AirPods', amount: '1999', location: '广州' },
  { id: '202412040004', time: '14:33:02', product: 'iPad', amount: '6999', location: '深圳' },
  { id: '202412040005', time: '14:33:18', product: 'Watch', amount: '2999', location: '杭州' }
])

const displayOrders = ref([])

// 生成新订单
const generateNewOrder = () => {
  const products = ['iPhone15', 'MacBook', 'AirPods', 'iPad', 'Watch', 'Keyboard', 'Mouse', 'Monitor', 'Headset', 'Speaker']
  const locations = ['北京', '上海', '广州', '深圳', '杭州', '南京', '成都', '武汉', '西安', '重庆']
  const amounts = ['999', '1999', '2999', '4999', '5999', '6999', '8999', '9999', '11999']

  const now = new Date()
  const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
  const id = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`

  return {
    id,
    time,
    product: products[Math.floor(Math.random() * products.length)],
    amount: amounts[Math.floor(Math.random() * amounts.length)],
    location: locations[Math.floor(Math.random() * locations.length)]
  }
}

// 初始化显示订单
const initDisplayOrders = () => {
  displayOrders.value = allOrders.value.slice(0, 5)
}

// 自动播放订单
const autoPlayOrders = () => {
  setInterval(() => {
    // 生成新订单
    const newOrder = generateNewOrder()

    // 添加到显示列表顶部
    displayOrders.value.unshift(newOrder)

    // 保持最多显示5个订单
    if (displayOrders.value.length > 5) {
      displayOrders.value.pop()
    }
  }, 3000) // 每3秒生成一个新订单
}

// 定时器
let timeTimer = null

// 切换销售分析标签
const switchSalesTab = (tab) => {
  currentSalesTab.value = tab
  // 重新初始化主图表
  if (centerMainChartInstance) {
    centerMainChartInstance.dispose()
  }
  setTimeout(async () => {
    await initMainChart()
  }, 100)
}

// 初始化主图表
const initMainChart = async () => {
  if (!centerMainChart.value) return

  centerMainChartInstance = echarts.init(centerMainChart.value)

  if (currentSalesTab.value === 'region') {
    // 先尝试加载地图数据
    await loadChinaMap()

    // 地域分布 - 中国地图
    const chinaMapOption = {
      backgroundColor: 'transparent',
      title: {
        text: '全国销售分布',
        left: 'center',
        top: '2%',
        textStyle: {
          color: '#ffffff',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00d4ff',
        textStyle: { color: '#ffffff' },
        formatter: function(params) {
          return `${params.name}<br/>销售额: ${params.value}万元<br/>排名: ${params.data.rank || '-'}`
        }
      },
      visualMap: {
        min: 0,
        max: 1520,
        left: '2%',
        bottom: '8%',
        text: ['销售额高', '销售额低'],
        textStyle: { color: '#ffffff', fontSize: 12 },
        inRange: {
          color: ['#1a2332', '#2d4a6b', '#4a7ba7', '#00d4ff', '#00ff88']
        },
        calculable: true,
        orient: 'vertical',
        itemWidth: 20,
        itemHeight: 140
      },
      series: [{
        name: '销售额',
        type: 'map',
        map: 'china',
        roam: true,
        zoom: 1.5,
        center: [104.114129, 35.550339],
        top: '8%',
        bottom: '5%',
        left: '5%',
        right: '15%',
        label: {
          show: true,
          color: '#ffffff',
          fontSize: 12,
          fontWeight: 'bold',
          formatter: function(params) {
            return params.name
          }
        },
        itemStyle: {
          borderColor: '#00d4ff',
          borderWidth: 1.5
        },
        emphasis: {
          itemStyle: {
            areaColor: '#ffff00',
            borderWidth: 3,
            borderColor: '#ffffff'
          },
          label: {
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        data: [
          { name: '北京市', value: 1450, rank: 1 },
          { name: '上海市', value: 1380, rank: 2 },
          { name: '广东省', value: 1520, rank: 1 },
          { name: '浙江省', value: 980, rank: 4 },
          { name: '江苏省', value: 1120, rank: 3 },
          { name: '山东省', value: 860, rank: 6 },
          { name: '河南省', value: 650, rank: 8 },
          { name: '四川省', value: 720, rank: 7 },
          { name: '湖北省', value: 580, rank: 10 },
          { name: '湖南省', value: 620, rank: 9 },
          { name: '福建省', value: 890, rank: 5 },
          { name: '安徽省', value: 480, rank: 12 },
          { name: '江西省', value: 420, rank: 14 },
          { name: '广西壮族自治区', value: 380, rank: 16 },
          { name: '海南省', value: 180, rank: 25 },
          { name: '重庆市', value: 520, rank: 11 },
          { name: '贵州省', value: 320, rank: 18 },
          { name: '云南省', value: 450, rank: 13 },
          { name: '西藏自治区', value: 80, rank: 31 },
          { name: '陕西省', value: 390, rank: 15 },
          { name: '甘肃省', value: 280, rank: 20 },
          { name: '青海省', value: 120, rank: 29 },
          { name: '宁夏回族自治区', value: 150, rank: 27 },
          { name: '新疆维吾尔自治区', value: 220, rank: 23 },
          { name: '天津市', value: 680, rank: 8 },
          { name: '河北省', value: 580, rank: 10 },
          { name: '山西省', value: 350, rank: 17 },
          { name: '内蒙古自治区', value: 290, rank: 19 },
          { name: '辽宁省', value: 520, rank: 11 },
          { name: '吉林省', value: 310, rank: 19 },
          { name: '黑龙江省', value: 380, rank: 16 }
        ]
      }]
    }
    centerMainChartInstance.setOption(chinaMapOption)
  } else if (currentSalesTab.value === 'category') {
    // 商品分类饼图
    const categoryOption = {
      backgroundColor: 'transparent',
      title: {
        text: '商品分类销售占比',
        left: 'center',
        top: '3%',
        textStyle: {
          color: '#ffffff',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00d4ff',
        textStyle: { color: '#ffffff' },
        formatter: function(params) {
          return `${params.name}<br/>销售额: ${params.value}万元<br/>占比: ${params.percent}%`
        }
      },
      legend: {
        orient: 'vertical',
        left: '5%',
        top: '35%',
        textStyle: {
          color: '#ffffff',
          fontSize: 12
        },
        data: ['电子产品', '服装鞋帽', '家居用品', '美妆护肤', '食品饮料', '运动户外', '图书文具', '其他']
      },
      series: [
        {
          name: '商品分类',
          type: 'pie',
          radius: ['35%', '65%'],
          center: ['62%', '55%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'outside',
            color: '#ffffff',
            fontSize: 11,
            formatter: function(params) {
              return `${params.name}\n${params.percent}%`
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: '#ffffff'
            }
          },
          data: [
            { value: 2850, name: '电子产品', itemStyle: { color: '#00d4ff' } },
            { value: 1680, name: '服装鞋帽', itemStyle: { color: '#00ff88' } },
            { value: 1240, name: '家居用品', itemStyle: { color: '#ffd93d' } },
            { value: 980, name: '美妆护肤', itemStyle: { color: '#ff6b6b' } },
            { value: 750, name: '食品饮料', itemStyle: { color: '#a78bfa' } },
            { value: 620, name: '运动户外', itemStyle: { color: '#34d399' } },
            { value: 480, name: '图书文具', itemStyle: { color: '#f472b6' } },
            { value: 320, name: '其他', itemStyle: { color: '#94a3b8' } }
          ]
        }
      ]
    }
    centerMainChartInstance.setOption(categoryOption)
  } else {
    // 销售趋势
    const trendOption = {
      backgroundColor: 'transparent',
      title: {
        text: '销售趋势分析',
        left: 'center',
        top: '5%',
        textStyle: {
          color: '#ffffff',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      grid: { top: 80, right: 50, bottom: 50, left: 80 },
      legend: {
        data: ['销售额', '订单量'],
        textStyle: { color: '#ffffff' },
        top: 40
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLine: { lineStyle: { color: '#4a5568' } },
        axisLabel: { color: '#a0aec0' }
      },
      yAxis: [
        {
          type: 'value',
          name: '销售额(万元)',
          position: 'left',
          axisLine: { lineStyle: { color: '#4a5568' } },
          axisLabel: { color: '#a0aec0' },
          splitLine: { lineStyle: { color: '#2d3748' } },
          nameTextStyle: { color: '#ffffff' }
        },
        {
          type: 'value',
          name: '订单量(单)',
          position: 'right',
          axisLine: { lineStyle: { color: '#4a5568' } },
          axisLabel: { color: '#a0aec0' },
          nameTextStyle: { color: '#ffffff' }
        }
      ],
      series: [
        {
          name: '销售额',
          type: 'line',
          yAxisIndex: 0,
          data: [820, 932, 901, 934, 1290, 1330],
          itemStyle: { color: '#00d4ff' },
          lineStyle: { color: '#00d4ff', width: 3 },
          smooth: true,
          symbol: 'circle',
          symbolSize: 8
        },
        {
          name: '订单量',
          type: 'bar',
          yAxisIndex: 1,
          data: [1200, 2000, 1500, 800, 700, 1100],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00ff88' },
              { offset: 1, color: 'rgba(0, 255, 136, 0.3)' }
            ])
          }
        }
      ]
    }
    centerMainChartInstance.setOption(trendOption)
  }
}

// 初始化图表
const initCharts = async () => {
  // 左侧图表1 - 用户访问趋势
  if (leftChart1.value) {
    leftChart1Instance = echarts.init(leftChart1.value)
    const option1 = {
      backgroundColor: 'transparent',
      grid: { top: 30, right: 30, bottom: 30, left: 50 },
      xAxis: {
        type: 'category',
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
        axisLine: { lineStyle: { color: '#4a5568' } },
        axisLabel: { color: '#a0aec0' }
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#4a5568' } },
        axisLabel: { color: '#a0aec0' },
        splitLine: { lineStyle: { color: '#2d3748' } }
      },
      series: [{
        data: [1200, 1800, 2400, 3200, 2800, 2200],
        type: 'line',
        smooth: true,
        lineStyle: { color: '#00d4ff', width: 3 },
        itemStyle: { color: '#00d4ff' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
              { offset: 1, color: 'rgba(0, 212, 255, 0)' }
            ]
          }
        }
      }]
    }
    leftChart1Instance.setOption(option1)
  }

  // 初始化主图表
  await initMainChart()

  // 右侧图表1 - 地域分布
  if (rightChart1.value) {
    rightChart1Instance = echarts.init(rightChart1.value)
    const option3 = {
      backgroundColor: 'transparent',
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: [
          { value: 35, name: '北京', itemStyle: { color: '#00d4ff' } },
          { value: 25, name: '上海', itemStyle: { color: '#00ff88' } },
          { value: 20, name: '广州', itemStyle: { color: '#ff6b6b' } },
          { value: 12, name: '深圳', itemStyle: { color: '#ffd93d' } },
          { value: 8, name: '其他', itemStyle: { color: '#8b5cf6' } }
        ],
        label: { color: '#a0aec0' },
        labelLine: { lineStyle: { color: '#4a5568' } }
      }]
    }
    rightChart1Instance.setOption(option3)
  }

  // 右侧图表2 - 设备统计
  if (rightChart2.value) {
    rightChart2Instance = echarts.init(rightChart2.value)
    const option4 = {
      backgroundColor: 'transparent',
      grid: { top: 30, right: 30, bottom: 30, left: 80 },
      xAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#4a5568' } },
        axisLabel: { color: '#a0aec0' },
        splitLine: { lineStyle: { color: '#2d3748' } }
      },
      yAxis: {
        type: 'category',
        data: ['PC', '移动端', '平板'],
        axisLine: { lineStyle: { color: '#4a5568' } },
        axisLabel: { color: '#a0aec0' }
      },
      series: [{
        type: 'bar',
        data: [
          { value: 45, itemStyle: { color: '#00d4ff' } },
          { value: 68, itemStyle: { color: '#00ff88' } },
          { value: 23, itemStyle: { color: '#ff6b6b' } }
        ]
      }]
    }
    rightChart2Instance.setOption(option4)
  }

  // 右侧图表3 - 设备状态
  if (rightChart3.value) {
    rightChart3Instance = echarts.init(rightChart3.value)
    const option5 = {
      backgroundColor: 'transparent',
      title: {
        text: '设备运行状态',
        left: 'center',
        top: '5%',
        textStyle: {
          color: '#ffffff',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00d4ff',
        textStyle: { color: '#ffffff' },
        formatter: function(params) {
          return `${params.name}<br/>设备数量: ${params.value}台<br/>占比: ${params.percent}%`
        }
      },
      legend: {
        orient: 'horizontal',
        bottom: '5%',
        left: 'center',
        textStyle: {
          color: '#ffffff',
          fontSize: 11
        },
        data: ['在线设备', '离线设备', '维护中', '故障设备']
      },
      series: [
        {
          type: 'pie',
          radius: ['35%', '65%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 6,
            borderColor: '#fff',
            borderWidth: 1
          },
          label: {
            show: true,
            position: 'outside',
            color: '#ffffff',
            fontSize: 11,
            formatter: function(params) {
              return `${params.name}\n${params.value}台`
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 13,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: '#ffffff'
            }
          },
          data: [
            {
              value: 128,
              name: '在线设备',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#00ff88' },
                  { offset: 1, color: '#00d4ff' }
                ])
              }
            },
            {
              value: 18,
              name: '离线设备',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#ff6b6b' },
                  { offset: 1, color: '#ff4757' }
                ])
              }
            },
            {
              value: 12,
              name: '维护中',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#ffd93d' },
                  { offset: 1, color: '#ffaa00' }
                ])
              }
            },
            {
              value: 5,
              name: '故障设备',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#a78bfa' },
                  { offset: 1, color: '#8b5cf6' }
                ])
              }
            }
          ]
        }
      ]
    }
    rightChart3Instance.setOption(option5)
  }
}

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 生命周期
onMounted(() => {
  updateTime()
  timeTimer = setInterval(updateTime, 1000)

  // 初始化订单显示
  initDisplayOrders()
  // 开始自动播放订单
  autoPlayOrders()

  setTimeout(async () => {
    await initCharts()
  }, 100)
})

onUnmounted(() => {
  if (timeTimer) clearInterval(timeTimer)
  if (leftChart1Instance) leftChart1Instance.dispose()
  if (centerMainChartInstance) centerMainChartInstance.dispose()
  if (rightChart1Instance) rightChart1Instance.dispose()
  if (rightChart2Instance) rightChart2Instance.dispose()
  if (rightChart3Instance) rightChart3Instance.dispose()
})
</script>

<style scoped>
/* 主容器样式 */
.datav-screen {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* 主页面滚动条样式 */
.datav-screen::-webkit-scrollbar {
  width: 8px;
}

.datav-screen::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.datav-screen::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.6);
  border-radius: 4px;
}

.datav-screen::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.8);
}

.datav-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(138, 92, 246, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 全屏模式 */
.datav-screen.fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  z-index: 9999;
  overflow-y: auto;
}

/* 头部样式 */
.screen-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.header-decoration {
  width: 300px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
  position: relative;
}

.header-decoration::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #00d4ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #00d4ff;
}

.screen-title {
  font-size: 42px;
  font-weight: bold;
  margin: 0 60px;
  text-align: center;
  background: linear-gradient(135deg, #00d4ff, #ffffff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
  letter-spacing: 2px;
}

.header-controls {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: right 0.3s ease;
}

/* 全屏状态下的头部控件位置 */
.datav-screen.fullscreen-mode .header-controls {
  right: 40px;
}

.current-time {
  font-size: 18px;
  color: #ffffff !important;
  font-family: 'Monaco', monospace;
  background: rgba(0, 212, 255, 0.2);
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(0, 212, 255, 0.4);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* 主内容区域 */
.screen-content {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 0 20px 20px;
  position: relative;
  z-index: 1;
}

/* 全屏模式下的内容区域 */
.datav-screen.fullscreen-mode .screen-content {
  height: calc(100vh - 100px);
  overflow-y: auto;
}

/* 左侧面板 */
.left-panel {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 中间面板 */
.center-panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100vh;
  padding: 20px 0;
}

/* 右侧面板 */
.right-panel {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 全屏模式下的面板高度优化 */
.datav-screen.fullscreen-mode .left-panel,
.datav-screen.fullscreen-mode .center-panel,
.datav-screen.fullscreen-mode .right-panel {
  height: 100%;
}

/* 面板区块 */
.panel-section {
  flex: 0 0 auto;
  position: relative;
  min-height: 300px;
}

/* 核心业务指标区块 - 更紧凑 */
.panel-section:first-child {
  min-height: 180px;
  flex: 0 0 auto;
}

/* 销售数据分析卡片 - 增加高度 */
.main-chart-section {
  flex: 1 1 auto;
  min-height: 500px;
  margin-bottom: 20px;
}

/* 实时订单卡片 - 对齐底部 */
.data-flow-section {
  margin-top: auto;
  min-height: 220px;
  flex: 0 0 auto;
}

/* 全屏模式下的调整 */
.datav-screen.fullscreen-mode .main-chart-section {
  min-height: 600px;
  flex: 2;
}

.datav-screen.fullscreen-mode .data-flow-section {
  min-height: 280px;
}

/* 区块边框容器 */
.section-border {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 区块头部 */
.section-header {
  padding: 18px 20px 15px;
  border-bottom: 2px solid rgba(0, 212, 255, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent);
  position: relative;
}

.section-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #00d4ff, #00ff88);
  border-radius: 0 2px 2px 0;
}

.datav-screen .section-title,
.datav-screen h3.section-title {
  font-size: 20px;
  color: #ffffff !important;
  margin: 0;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  padding-left: 15px;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.6),
    0 0 20px rgba(0, 212, 255, 0.4),
    2px 2px 4px rgba(0, 0, 0, 0.8);
}


.section-title::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #00d4ff 0%, #ffffff 50%, #00d4ff 100%);
  border-radius: 50%;
  box-shadow:
    0 0 10px #00d4ff,
    0 0 20px rgba(0, 212, 255, 0.5),
    inset 0 0 5px rgba(255, 255, 255, 0.3);
}

/* 图表容器 */
.chart-container {
  flex: 1;
  padding: 20px;
  min-height: 200px;
}

.main-chart {
  min-height: 350px;
}

/* 左侧指标网格 */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 20px;
}

.metric-item {
  text-align: center;
  padding: 15px;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.metric-value {
  font-size: 36px;
  font-weight: 700;
  color: #00d4ff;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.metric-label {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 8px;
  font-weight: 600;
}

.metric-unit {
  font-size: 12px;
  color: #718096;
}

/* 中间核心指标 */
.center-metrics {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  gap: 20px;
}

.big-metric {
  text-align: center;
  flex: 1;
}

.big-value {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.big-label {
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.metric-trend {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.metric-trend.up {
  color: #00ff88;
}

.metric-trend.down {
  color: #ff6b6b;
}

.trend-icon {
  font-size: 16px;
}

/* 图表标签页 */
.chart-tabs {
  display: flex;
  gap: 20px;
}

.tab-item {
  background: none;
  border: 1px solid rgba(0, 212, 255, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.tab-item:not(.active) {
  color: #a0aec0;
}

.tab-item:hover {
  background: rgba(0, 212, 255, 0.1);
}

/* 热门商品排行 */
.ranking-list {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.ranking-list::-webkit-scrollbar {
  width: 6px;
}

.ranking-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.ranking-list::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.6);
  border-radius: 3px;
}

.ranking-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.8);
}

/* 实时订单流样式 */
.order-stream {
  padding: 20px;
}

.order-header {
  margin-bottom: 15px;
}

.order-title {
  font-size: 16px;
  color: #00d4ff;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.order-list {
  max-height: 180px;
  overflow-y: auto;
  padding-right: 5px;
}

/* 全屏模式下订单列表高度调整 */
.datav-screen.fullscreen-mode .order-list {
  max-height: 220px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 4px;
  border-left: 2px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
  animation: slideInRight 0.5s ease-out;
  font-size: 12px;
}

.order-item.order-highlight {
  background: rgba(0, 212, 255, 0.15);
  border-left-color: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.order-time {
  font-size: 11px;
  color: #00ff88;
  font-weight: 500;
  min-width: 50px;
}

.order-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  margin-left: 8px;
}

.order-id {
  font-size: 10px;
  color: #ffffff;
  background: rgba(0, 212, 255, 0.3);
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.order-product {
  font-size: 11px;
  color: #ffffff;
  font-weight: 500;
  flex: 1;
  min-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-amount {
  font-size: 11px;
  color: #00ff88;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

.order-location {
  font-size: 10px;
  color: #ffaa00;
  background: rgba(255, 170, 0, 0.15);
  padding: 1px 4px;
  border-radius: 2px;
  min-width: 35px;
  text-align: center;
}

/* 订单滑入动画 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 订单列表滚动条 */
.order-list::-webkit-scrollbar {
  width: 4px;
}

.order-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.order-list::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.4);
  border-radius: 2px;
}

.order-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.6);
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #00ff88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  margin-right: 15px;
}

.product-info {
  flex: 1;
  margin-right: 15px;
}

.product-name {
  font-size: 17px;
  color: #ffffff;
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.product-sales {
  font-size: 13px;
  color: #00d4ff;
  font-weight: 400;
}

.sales-bar {
  width: 60px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
  transition: width 0.3s ease;
}



/* 系统监控 */
.system-monitor {
  padding: 20px;
}

.monitor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.monitor-item:last-child {
  margin-bottom: 0;
}

.monitor-label {
  font-size: 17px;
  color: #ffffff;
  width: 100px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.monitor-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 15px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #ffffff;
  width: 35px;
  text-align: right;
}

/* 动画效果 */
@keyframes dataFlowPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 212, 255, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
  }
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .screen-title {
    font-size: 36px;
  }

  .left-panel, .right-panel {
    width: 28%;
  }

  .center-panel {
    width: 44%;
  }
}

@media (max-width: 1200px) {
  .screen-content {
    flex-direction: column;
    gap: 15px;
  }

  .left-panel, .center-panel, .right-panel {
    width: 100%;
  }

  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .center-metrics {
    flex-direction: row;
    justify-content: space-around;
  }
}
</style>
